import { PageContainer } from '@ant-design/pro-components';
import RcResizeObserver from 'rc-resize-observer';
import React, { useState } from 'react';
import { useAccess } from 'umi';
import TableActive from './active/TableActive';
import TableSubmit from './submit/TableSubmit';

const Seek: React.FC = () => {
  const access = useAccess();

  const [width, setWidth] = useState(500);

  /**
   * 搜索参数
   */
  const [tabActiveKey, setTabActiveKeyState] = useState<string>('TableActive');

  const tabList = () => {
    return [
      {
        tab: '主动报送线索',
        key: 'TableActive',
      },
      {
        tab: '选题报送线索',
        key: 'TableSubmit',
      },
    ];
  };

  return (
    <RcResizeObserver
      key="resize-observer"
      onResize={(size) => {
        setWidth(size.width);
      }}
    >
      <PageContainer
        tabList={tabList()}
        onTabChange={setTabActiveKeyState}
        tabBarExtraContent={{
          left: (
            <span
              style={{
                marginInlineEnd: '12px',
                color: 'rgba(0, 0, 0, 0.88)',
                fontWeight: 600,
                fontSize: 20,
                height: 48,
                paddingRight: 35,
                marginBottom: 10,
              }}
              title="全域线索"
            >
              全域线索
            </span>
          ),
        }}
      >
        {tabActiveKey === 'TableActive' && <TableActive />}
        {tabActiveKey === 'TableSubmit' && <TableSubmit isEditable={false} />}
      </PageContainer>
    </RcResizeObserver>
  );
};
export default Seek;
